<template>
	<gracePage headerBG="#1CA376" class="main-bodybg-color">
		<view slot="gHeader">
			<view class="grace-header-body grace-relative main-bg-color">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34 grace-white" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center grace-white">
					<text class="grace-h4 font-size-36 text-center" style="font-size:36rpx;">绑定支付宝账号</text>
				</view>
				<!-- 消息按钮 -->
				<view class="grace-header-icons font-size-24 grace-white pr-2"></view>
			</view>
		</view>
		<view slot="gBody" class="">
			<form @submit="formSubmit" class="grace-form grace-margin-top ">
				<view class="mx-3 my-2">
					<view class="grace-bg-white py-2 grace-border-radius-small">
						<view class="grace-form-item grace-border-b">
							<!-- <text class="grace-icons icon-comments grace-form-icon grace-blue"></text> -->
							<text class="grace-form-label pl-2">用户名</text>
							<view class="grace-form-body"><input type="text" class="grace-form-input text-left" v-model="inputName" name="inputName" placeholder="请输入真实姓名" /></view>
						</view>
						<view class="grace-form-item ">
							<!-- <text class="grace-icons icon-comments grace-form-icon grace-blue"></text> -->
							<text class="grace-form-label pl-2">账号</text>
							<view class="grace-form-body"><input type="number" class="grace-form-input text-left" v-model="inputNumber" name="inputNumber" placeholder="请输入账号" /></view>
						</view>
					</view>
					<view class="pt-5"><button type="primary" formType="submit" class="grace-button mx-3 mt-4">绑定账号</button></view>
				</view>
			</form>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
import { mapState , mapActions} from 'vuex';
export default {
	data() {
		return {
			oneGoStatus: true,
			inputName:'',
			inputNumber:'',
		};
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo
		})
	},
	onLoad: function() {
		console.log( this.userInfo)
		this.inputNumber = this.userInfo.alipay_name;
		this.inputName = this.userInfo.alipay_id;
	},
	methods: {
		...mapActions(['getUserInfo']),
		formSubmit(e) {
			var info = e.detail.value;
			if(info.inputName == '' || info.inputNumber == '') return;
			let opt = {
				act:'edit_alipay',
				alipay_id:info.inputNumber,
				alipay_name:info.inputName,
			}
			this.$HTTP.postStatus('/api/api.php', opt, { token: true }).then(res=>{
				console.log('res',res)
				if(res.result == 1002){
					// 获取用户信息
					this.getUserInfo();
				}
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
				
			})
		}
	},
	components: { gracePage }
};
</script>
<style scoped></style>
